<template>
  <div>
    <div class="wrap clearfix" >
	     <div class="item">
          <div class="item1">
            <img :src="Factory[0].img" alt=""> <span>{{ Factory[0].class}} </span>
           </div>
          <!-- <span class="quantity">{{ Factory[0].device_acquisition }}</span> -->
       </div>
	     <div class="item">
        <!-- <div class="item1">
            <img :src="Factory[1].img" alt=""> <span>{{ Factory[1].class}} </span>
           </div> -->
          <span class="quantity">{{ Factory[0].device_acquisition }}</span>
       </div>
	     <div class="item">
        <div class="item1">
            <img :src="Factory[1].img" alt=""> <span>{{ Factory[1].class}} </span>
           </div>
          <!-- <span class="quantity">{{ Factory[2].device_acquisition }}</span> -->
       </div>
	     <div class="item">
        <!-- <div class="item1">
            <img :src="Factory[3].img" alt=""> <span>{{ Factory[3].class}} </span>
           </div> -->
          <span class="quantity">{{ Factory[1].device_acquisition }}</span>
       </div>
	     <div class="item">
        <div class="item1">
            <img :src="Factory[2].img" alt=""> <span>{{ Factory[2].class}} </span>
           </div>
          <!-- <span class="quantity">{{ Factory[3].device_acquisition }}</span> -->
       </div>
	     <div class="item">
        <!-- <div class="item1">
            <img :src="Factory[3].img" alt=""> <span>{{ Factory[3].class}} </span>
           </div> -->
          <span class="quantity">{{ Factory[2].device_acquisition }}</span>
       </div>
	     <div class="item">
        <div class="item1">
            <img :src="Factory[3].img" alt=""> <span>{{ Factory[3].class}} </span>
           </div>
          <!-- <span class="quantity">{{ Factory[3].device_acquisition }}</span> -->
       </div>
	     <div class="item">
        <!-- <div class="item1">
            <img :src="Factory[3].img" alt=""> <span>{{ Factory[3].class}} </span>
           </div> -->
          <span class="quantity">{{ Factory[3].device_acquisition }}</span>
       </div>
	     <div class="item">
        <div class="item1">
            <img :src="Factory[4].img" alt=""> <span>{{ Factory[4].class}} </span>
           </div>
          <!-- <span class="quantity">{{ Factory[3].device_acquisition }}</span> -->
       </div>
	     <div class="item">
        <!-- <div class="item1">
            <img :src="Factory[3].img" alt=""> <span>{{ Factory[3].class}} </span>
           </div> -->
          <span class="quantity">{{ Factory[4].device_acquisition }}</span>
       </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Example04Basic",
  props:{
    Factory:{
         type:Array,
         isGetData:false
         }
         },
  data() {
    return {

    };
  },
};
</script>
<style scoped>
	.wrap{
       display: flex;
       width: 100%;
       height: 100%;
       /* 先两边贴边， 在分配剩余的空间 */
       justify-content:space-around;
       flex-wrap: wrap;
	    }
	.item{
     display: flex;
     line-height: 105px;
     flex-direction: column;
     justify-content: space-between;
     width: 300px;
     height: 105px;
     margin: 5px;
     border: 1px solid rgb(4, 114, 131);
	}
  .item .item1{
    /* width: 90%; */
    /* height: 50%; */
    /* color:white; */
    /* color: aqua; */
    /* text-align: center; */
    margin-left: 30px;
  }
  .item .item1 span{
    color: white;
    /* color: aqua; */
    font-size: 25px;
    text-align: center;
    line-height: 50px;
  }
  .item .item1 img{
      width: 35%;
      height: 90%;
      vertical-align: middle; 
  }
  .item .quantity{
    text-align: center;
    line-height: 50px;
    font-size: 60px;
    color: aqua;
    line-height: 105px;
    font-family:electronicFont;
  }
</style>